<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<!-- Pager CSS -->
<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
<link rel="stylesheet" href="__STATIC__/assets/unpkg/element-ui@2.12.0/lib/theme-chalk/index.css">
<style type="text/css">

</style>
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>收发货管理</li>
			    <li>到货登记</li>
			</ul>
			<div class="container-fluid">
				
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline" role="form" id="form1">
						<vue-select 
							placeholder="类别"
							v-model="search.cate_name"
							url="{%:url('Goods/getCateListBySort')%}"
							:sorts ="['衣服','下装','鞋','箱包','饰品']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<vue-select 
							placeholder="品牌"
							v-model="search.brand_name"
							url="{%:url('Brand/getListBySort')%}"
							:sorts ="['AB','CD','EF','GH','IJ','KL','MN','OP','QR','ST','UV','WX','YZ']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<input type="text" class="form-control" placeholder="订单号" size="5"
								v-model="search.order_no">
						<vue-select 
							placeholder="销售"
							v-model="search.acct_name"
							url="{%:url('Account/getSalers')%}"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<input type="text" class="form-control" placeholder="档口号" size="5"
								v-model="search.stall_name">
					    <button type="button" class="btn btn-primary search" @click="getList(1)">查询</button>
                        <button type="button" class="btn btn-primary search" @click="all()">批量登记</button>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row" id="result">
                    <el-table
                        :data="rows"
                        border
                        ref="multipleTable"
                        @selection-change="handleSelectionChange"
                        style="width: 100%">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                        prop="order_no"
                        label="订单号"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        prop="pic_tmb"
                        label="商品"
                        width="150">
                            <template slot-scope="scope">
                                <a :href="scope.row.goods_pic" title='点击看大图' target="_BLANK" class="pre_view">
                                    <img :src="scope.row.pic_tmb" height="38">
                                </a>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="goods_name"
                        label="商品名称"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        prop="color"
                        width="120"
                        label="颜色/尺码">
                        </el-table-column>
                        <el-table-column
                        prop="o_qty"
                        label="订单数量"
                        width="100">
                        </el-table-column>
                        <el-table-column
                        prop="stock"
                        label="已到数量"
                        width="80">
                        </el-table-column>
                        <el-table-column
                        prop="stall_name"
                        label="档口">
                        </el-table-column>
                        <el-table-column
                        prop="remarks"
                        label="备注"
                        width="90">
                        </el-table-column>
                        <el-table-column
                        prop="saler"
                        label="销售"
                        width="100">
                        </el-table-column>
                        <el-table-column
                        prop="acct_name"
                        label="报单人">
                        </el-table-column>
                        <el-table-column
                        prop="status_txt"
                        label="报单状态"
                        width="100">
                            <template slot-scope="scope">
                                <span class="label" :class="progress_class[scope.row.status]">
                                    {{ scope.row.status_txt }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="add_time"
                        label="报单时间"
                        width="100">
                            <template slot-scope="scope">
                                {{scope.row.add_day}} 
										<span style="padding-left: 5px; font-size: 10px; color:#aaa;">{{scope.row.add_time}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150"  fixed="right">
                            <template slot-scope="scope">
                              <el-button
                                size="mini"
                                @click="goodsEntry(scope.row)"
                                >到货</el-button>
                              <el-button
                                size="mini"
                                type="danger"
                                @click="del(scope.row)"
                                >删除</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        
                    </el-table>
                    <div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
					<!-- <table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>订单号</th>
								<th>商品</th>
								<th>商品名称</th>
								<th>颜色/尺码</th>
								<th>订单数量</th>
								<th>已到数量</th>
								<th>档口</th>
								<th>备注</th>
								<th>销售</th>
								<th>报单人</th>
								<th>报单状态</th>
								<th>报单时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>				
								<tr v-for="row in rows">
									<td>{{row.order_no}}<span style="color: #aaa"> - {{row.order_sn}}</span></td>
									<td>
										<a :href="row.goods_pic" title='点击看大图' target="_BLANK" class="pre_view">
											<img :src="row.pic_tmb" height="38">
										</a>
									</td>
									<td>{{ row.goods_name }}</td>
									<td>{{ row.color }} / {{ row.spec }}</td>
									<td>{{ row.o_qty }}</td>
									<td>{{ row.stock }}</td>
									<td>{{ row.stall_name }}</td>
									<td>{{ row.remarks }}</td>
									<td>{{ row.saler }}</td>
									<td>{{ row.acct_name }}</td>
									<td>
										<span class="label" :class="progress_class[row.status]">
										{{ row.status_txt }}</span>
										
									</td>
									<td>{{row.add_day}} 
										<span style="padding-left: 5px; font-size: 10px; color:#aaa;">{{row.add_time}}</span>
									</td>
									<td>
										<a href="#" @click="goodsEntry(row)"><i class="fa fa-registered"></i> 到货</a>
										<a href="#" style="color:red" @click="del(row)"><i class="el-icon-delete"></i> 删除</a>
									</td>
								</tr>
								<tr v-if="rows.length ==0">
									<td style="color:red" colspan="13">
										<i class="fa fa-search" aria-hidden="true"></i> 查询无记录
									</td>
								</tr>
						</tbody>
					</table>
					<div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div> -->
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- END MAIN CONTENT -->
		<transition name="fade">
			<vue-modal title="登记入库" :visible.sync="showModal">
				<form class="form-horizontal" role="form" method="post" style="width: 90%;">
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">商品</label>
						<div class="col-sm-4 form-control-static">
							{{ stock.goods_name }}
						</div>
						<div class="col-sm-1"><img :src="stock.pic" id="preview" height="220" style="position: absolute;"></div>
					</div>
					
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">尺码/颜色</label>
						<div class="col-sm-4 form-control-static">
							{{ stock.spec }} / {{ stock.goods_color }}
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">订单号</label>
						<div class="col-sm-4 form-control-static">
							{{ stock.order_no }}
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">档口</label>
						<div class="col-sm-4 form-control-static">
							{{ stock.stall_name }}
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">数量</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" v-model="stock.qty">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">备注</label>
						<div class="col-sm-4">
							<textarea class="form-control" rows="2" style="resize: none;" v-model="stock.remarks"></textarea>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="button" class="btn btn-primary" @click="entryHandle()">确认入库</button>
						</div>
					</div>
				</form>
			</vue-modal>
		</transition>
        <!-- 到货输入框 -->
        <el-dialog title="登记入库" width="60%" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column
                prop="order_no"
                label="订单号"
                width="180">
                </el-table-column>
                <el-table-column
                prop="pic_tmb"
                label="商品"
                width="150">
                    <template slot-scope="scope">
                        <a :href="scope.row.pic" title='点击看大图' target="_BLANK" class="pre_view">
                            <img :src="scope.row.pic" height="100">
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                prop="goods_name"
                label="商品名称"
                width="120">
                </el-table-column>
                <el-table-column
                prop="goods_color"
                width="120"
                label="颜色/尺码">
                </el-table-column>
                <el-table-column
                prop="qty"
                label="数量"
                width="200">
                    <template slot-scope="scope">
                        <el-input type="number" v-model.nmber="scope.row.qty" placeholder="请输入数量"></el-input>
                    </template>
                
                </el-table-column>
                
                <el-table-column
                prop="remarks"
                label="备注"
                width="200">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.remarks" placeholder="请输入备注"></el-input>
                </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="goodsEntrys">确认入库</el-button>
            </span>
        </el-dialog>
	</div>
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/page/stock-in.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				search: {
					cate_name: '',
					brand_name: '',
					acct_name: '',
					stall_name: '',
					status: '',
					order_no:''
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				showModal: false,
				// order_id: '',
				progress_class: ['','label-primary','label-danger','label-success'],
				stock: {},
                multipleSelection:[],
                dialogTableVisible:false,
                gridData:[]
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
				'vue-modal': vueModal
			},
			created: function(){
				this.getList();
				//console.log(this.rows);
			},
			methods:{
                all(){
                    if(this.multipleSelection.length<1){
                        return this.$message.warning('请选择商品')
                    }
                    let stocks = []
                    this.multipleSelection.forEach(row => {
                        let stock = {
                            goods_name: row.goods_name,
                            pic: row.goods_pic,
                            goods_color: row.color,
                            spec: row.spec,
                            order_no: row.order_no,
                            order_item_id: row.order_item_id,
                            purchase_id: row.id,
                            stall_name: row.stall_name,
                            qty: '',
                            remarks: ''
                        };
                        stocks.push(stock)
                        // this.gridData = [...this.gridData,stock]
                    });
                    this.gridData = stocks
                    this.dialogTableVisible = true
                },
                handleSelectionChange(val) {
                    console.log({val});
                    this.multipleSelection = val;
                },
                // 批量登记

                goodsEntrys(){
                    this.gridData.forEach(stock => {
                        this.stock = stock
                        this.entryHandle()
                    });
                    this.dialogTableVisible = false
                },
				// 删除到货数据
				del(row){
					console.log({row});
					let t = this;
					if(confirm('确定要删除 ？')) {
						$.post("{%:url('Purchase/del')%}",{id:row.id},function(rsp){
							t.getList(t.cur_page);
							if(rsp.code == 1){
								t.$message({
								type: "success",
								message: "删除成功!"
								});
							}else{
								t.$message({
								type: "error",
								message: "删除失败!"
								});
							}
						},'json')
					}
				},
				getList: function(page=1){
					var _this = this;
					var data = this.search;
					data['status'] = 1;
					$.post("{%:url('Purchase/getList')%}?page=" + page,data,function(rsp){
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				cancel: function(id){
					var _this = this;
    				if(confirm('确定要取消 ？')) {
    					$.get("{%:url('Purchase/cancel')%}?id="+id,function(rsp){
							alert(rsp.msg);
							_this.getList();
						},'json')
    				}
				},
				goodsEntry: function(row){
					// this.showModal = true;
					this.stock = {
						goods_name: row.goods_name,
						pic: row.goods_pic,
						goods_color: row.color,
						spec: row.spec,
						order_no: row.order_no,
						order_item_id: row.order_item_id,
						purchase_id: row.id,
						stall_name: row.stall_name,
						qty: '',
						remarks: ''
					};
                    this.gridData = [this.stock]
                    this.dialogTableVisible = true
					//this.stock = row;
				},
				entryHandle: function(){
					var data = this.stock;
					var _this = this;
					$.post("{%:url('StockIn/handle')%}",data,function(rsp){
						alert(rsp.msg);
						if (rsp.code) {
							_this.getList();
							_this.showModal = false;
						}
					},'json')
				}
			}
		});
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','a.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('href')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','a.pre_view',function(){
			layer.close(tip_index);
		})
		
	</script>
</body>

</html>